<template>
  <div class="edit-title">
    <span>我的信息</span>
  </div>
  <div class="edit-body">
    <el-form ref="form" :model="user" class="editForm">
      <el-form-item label="昵称" class="nickName">
        <el-input v-model="user.nickName" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="ID">
        <span disabled placeholder="用户ID为空，请与管理员联系">{{user.number}}</span>
      </el-form-item>
      <el-form-item label="地址">
        <el-cascader v-model="user.selectedOptions" :options="user.address" placeholder="请选择地区" size="large"/>
      </el-form-item>
      <el-form-item label="生日">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="user.birthday" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="是否展示">
        <el-switch v-model="user.isShow"></el-switch>
      </el-form-item>
<!--      多选-->
<!--      <el-form-item label="活动性质">-->
<!--        <el-checkbox-group v-model="user.type">-->
<!--          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>-->
<!--          <el-checkbox label="地推活动" name="type"></el-checkbox>-->
<!--          <el-checkbox label="线下主题活动" name="type"></el-checkbox>-->
<!--          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>-->
<!--        </el-checkbox-group>-->
<!--      </el-form-item>-->
<!--      单选-->
      <el-form-item label="性别">
        <el-radio-group v-model="user.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
          <el-radio label="保密"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="职业" class="occupation">
        <el-input placeholder="职业" v-model="user.occupation"></el-input>
      </el-form-item>
      <el-form-item label="学校" class="school">
        <el-input placeholder="学校" v-model="user.school"></el-input>
      </el-form-item>
      <el-form-item label="个人介绍" class="personal-profile">
        <el-input placeholder="个人介绍" type="textarea" v-model="user.personalProfile"></el-input>
      </el-form-item>
      <el-form-item class="submit-btn">
        <el-button type="primary" @click="saveUser">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { CodeToText, regionDataPlus, TextToCode } from 'element-china-area-data'
import { getUserInfo, saveUserInfo } from '@/services/index/personalCentre/personalCenter'

export default {
  name: 'PersonalInterface',
  data () {
    return {
      user: {
        nickName: '',
        address: regionDataPlus,
        selectedOptions: [],
        birthday: '',
        sex: '',
        isShow: false,
        occupation: '',
        school: '',
        personalProfile: ''
      }
    }
  },
  created () {
    this.queryUser()
  },
  inject: ['reload'],
  methods: {
    // 注册账号
    queryUser: async function () {
      const user = this.$store.state.user ? this.$store.state.user : null
      if (!user) {
        await this.$router.push({ path: '/login' })
      }
      const data = {
        strategy: 'Personal Interface'
      }
      const userInfo = JSON.stringify(data)
      getUserInfo(userInfo).then((res) => {
        // 判断是否登录
        if (res.code === 30000) {
          this.$router.push({ path: '/login' })
          return
        }
        if (res.code !== 10000) {
          this.$message.error('服务器开小差了')
          return
        }
        // 回显
        const baseInfo = res.data
        // 获取基础信息
        this.user.number = baseInfo.number
        this.user.nickName = baseInfo.nickName
        this.user.isShow = baseInfo.isShow
        this.user.sex = baseInfo.sex
        this.user.selectedOptions = [
          TextToCode[JSON.parse(baseInfo.address)[0]].code,
          TextToCode[JSON.parse(baseInfo.address)[0]][JSON.parse(baseInfo.address)[1]].code,
          TextToCode[JSON.parse(baseInfo.address)[0]][JSON.parse(baseInfo.address)[1]][JSON.parse(baseInfo.address)[2]].code
        ]
        this.user.birthday = baseInfo.birthday
        this.user.family = baseInfo.family
        this.user.school = baseInfo.school
        this.user.occupation = baseInfo.occupation
        this.user.personalProfile = baseInfo.personalProfile
      })
    },

    saveUser: function () {
      const formData = {
        userBaseInfo: {
          number: this.user.number,
          nickName: this.user.nickName,
          isShow: this.user.isShow,
          sex: this.user.sex,
          birthday: this.user.birthday,
          address: [
            CodeToText[this.user.selectedOptions[0]],
            CodeToText[this.user.selectedOptions[1]],
            CodeToText[this.user.selectedOptions[2]]
          ],
          school: this.user.school,
          family: '',
          occupation: this.user.occupation,
          personalProfile: this.user.personalProfile
        },
        strategy: 'Personal Interface'
      }
      const userInfo = JSON.stringify(formData)
      saveUserInfo(userInfo).then((res) => {
        if (res.code !== 10000) {
          this.$message.error('服务器开小差了')
        }
        this.reload()
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "personalInterface";
</style>
